<template>
  <div class="index-container">
    <el-drawer v-model="dialogFormVisible" size="60%" @close="close">
      <template #header>
        <h4>{{ title }}客户信息</h4>
      </template>
      <BaseComponents :base-components-prop="baseComponentsData" />
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="基本资料" name="baseData">
          <BaseData
            v-if="baseInfoData"
            :base-info-prop="baseInfoData"
            :area-options="areaOptions"
            @get-data="getData"
          />
        </el-tab-pane>
        <el-tab-pane label="跟进信息" name="followLogs">
          <FollowData
            v-if="followData"
            :mid="mid"
            :follow-prop="followData"
            @get-follow="getFollow"
          />
        </el-tab-pane>
      </el-tabs>
    </el-drawer>
  </div>
</template>
<script>
  import { getCustomInfo, getFollows } from '@/api/custom'
  import BaseComponents from './components/baseComponents'
  import BaseData from './components/baseData'
  import FollowData from './components/followData'
  export default defineComponent({
    name: 'DetailDrawer',
    components: { BaseComponents, BaseData, FollowData },
    props: {
      items: {
        type: Array,
        required: true,
      },
    },
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')
      const state = reactive({
        mid: 0,
        baseComponentsData: null,
        baseInfoData: null,
        followData: null,
        areaOptions: props.items,
        title: '',
        activeName: 'baseData',
        dialogFormVisible: false,
      })
      const showCat = (row, type) => {
        state.title = '会员管理'
        state.activeName = type
        state.mid = row.id
        state.dialogFormVisible = true
        state.baseComponentsData = row
        switch (type) {
          case 'baseData':
            getData(row.id)
            break
          case 'followLogs':
            getFollow(row.id)
            break
        }
      }

      const getFollow = async (mid) => {
        const data = await getFollows({ custom_id: mid })
        state.followData = data.data
      }

      const getData = async (mid) => {
        try {
          const data = await getCustomInfo({ mid: mid })
          state.baseInfoData = data.data
          console.log(state.baseInfoData)
        } catch (e) {
          $baseMessage(e.message, 'error', 'vab-hey-message-error')
        }
      }

      const close = () => {
        state.dialogFormVisible = false
        emit('fetch-data')
      }

      const handleClick = (tab) => {
        //这样才能获取每个el-tab-pane的name属性
        switch (tab.props.name) {
          case 'baseData':
            state.activeName = 'baseRef'
            getData(state.mid)
            console.log('baseRef')
            break
          case 'followLogs':
            state.activeName = 'followRef'
            getFollow(state.mid)
            break
        }
      }

      return {
        ...toRefs(state),
        showCat,
        close,
        handleClick,
        getData,
        getFollow,
      }
    },
  })
</script>
<style lang="scss" scoped>
  .index-container {
    .card-header {
      min-height: 145px;
      transition: none;
      display: flex;
      border-radius: 10px;

      :deep() {
        * {
          transition: none;
        }

        .el-card__body {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          width: 100%;
        }
      }

      .page-header {
        width: 100%;
        &-name {
          display: flex;
          align-items: center;
          font-size: 18px;
          font-weight: 600;
        }
        &-tel {
          display: flex;
          align-items: center;
          .el-card {
            flex: 1;
            margin-right: 30px;
            margin-top: 10px;
            border-radius: 10px;
            font-size: 16px;
          }
        }

        &-info {
          display: flex;
          align-items: center;
        }
      }

      .card-content {
        width: 100%;
        display: flex;
        justify-content: space-between; /* 使子元素在主轴上均匀分布，两端对齐 */
        align-items: center; /* 使子元素在交叉轴上居中，如果需要的话 */
      }

      .right-content {
        /* 如果需要，可以设置一个最小宽度 */
        min-width: fit-content; /* 或者使用具体的宽度值 */
      }
    }

    .pay-button-group {
      display: block;
      margin: 20px auto;
      text-align: center;
    }

    .follow-text-card {
      height: auto;
    }

    .follow-logs-card {
      height: 60vh;
    }
    .follow-logs-content {
      height: 50vh !important;
      overflow-y: auto;
      scrollbar-width: none;
    }

    .vab-info-card {
      position: relative;
      width: 100%;
      padding: $base-padding;
      background: #e2e2e2;
      border-radius: $base-border-radius + 2;

      &::after {
        position: absolute;
        top: 8px;
        left: -10px;
        width: 0;
        height: 0;
        overflow: hidden;
        content: '';
        border-color: #e2e2e2 transparent transparent;
        border-style: solid dashed dashed;
        border-width: 10px;
      }
    }

    .vab-data-empty {
      min-height: 0;
    }
  }
</style>
